<template>
  <van-nav-bar title="VueShop" />

  <van-tree-select v-model:main-active-index="active" height="85vh" :items="items" @click="TypeTab(items[active].value)">
    <template #content>
      <van-card
        v-for="(item, key) in list"
        :key="key"
        :price="item.price"
        :desc="removeHtmlTags(item.content)"
        :title="item.name"
        :thumb="item.thumbs_text"
        @click-thumb="ProductInfo(item.id)"
      >
        <!-- <template #desc>
          <div v-html="item.content"></div>
        </template> -->
        
        <template #num>
          <van-button size="mini" @click="ProductInfo(item.id)">查看详情</van-button>
        </template>
      </van-card>

    </template>
  </van-tree-select>

  <Tabbar />
</template>

<script setup>
  const {proxy} = getCurrentInstance()

  let active = ref(0)
  let items = reactive([{text: '全部分类', value: '0'}])
  let list = ref([])

  onMounted(() => {
    TypeData()
    ProductData()
  })

  //正则处理描述内容带有标签的内容
  const removeHtmlTags = (content) => {
    return content.replace(/<[^>]*>/g, "");
  };

  //获取分类数据
  const TypeData = async () =>
  {
    var result = await proxy.$POST({
      url: 'product/type',
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    result.data.map(item => {
      items.push({text:item.name, value: item.id})
    })
  }

  //获取商品数据
  const ProductData = async () =>
  {
    var result = await proxy.$POST({
      url: '/product/typeproduct',
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }
    
    list.value = result.data.list
  }

  //分类切换
  const TypeTab = async (typeid) => 
  {
    var params = {
      typeid,
    }
    var result = await proxy.$POST({
      url: '/product/typeproduct',
      params
    })
    
    list.value = result.data.list
  }

  const ProductInfo = (proid) => proxy.$router.push({path: '/product/info', query: {proid}})
</script>